<template>
  <div class="container">
    <div class="app-container">
      <el-button
        class="btn-add"
        size="mini"
        type="primary"
        @click="adddelPermission(0, 1,'add')"
      >添加权限</el-button>
      <el-table :data="list" default-expand-all row-key="id">
        <el-table-column label="名称" prop="name" />
        <el-table-column label="标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              v-if="row.type === 1"
              ref="button"
              size="mini"
              type="text"
              data-type="add"
              @click="adddelPermission(row.id,'','add')"
            >添加</el-button>
            <el-button
              ref="button"
              type="text"
              size="mini"
              data-type="edit"
              @click="echoPermission(row.id,'','edit')"
            >编辑</el-button>

            <el-button type="text" size="mini" @click="delPermission(row.id)">
              删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 放置一个弹层 用来编辑新增节点 -->
    <el-dialog
      :title="usertitle"
      :visible.sync="dialogVisible"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="权限名称" prop="">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item>
          <el-switch
            v-model="form.enVisible"
            inactive-text="开启"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
        <el-form-item style="margin-left:20px">
          <el-button type="primary" @click="Addconfirm">确定</el-button>
          <el-button @click="closedialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getPermissionList, delPermission, addPermission, echoPermission, editPermission } from '@/api/permission'
import { transListToTreeData } from '@/utils'
export default {
  data() {
    return {
      usertitle: '',
      list: [], // 初始化数据
      dialogVisible: false, // 控制弹窗开关
      Type: '',
      form: {
        name: '', // 权限点名字
        code: '', // 权限点标识
        description: '', // 权限点描述
        enVisible: '', // 权限点开启状态
        type: 2, // 权限点类型
        pid: '' // 权限点父级id
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    async getPermissionList() { // 渲染数据
      this.list = transListToTreeData(await getPermissionList(), 0)
    },
    async delPermission(id) { // 删除数据
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPermission(id)
        this.$message.success('删除成功')
        this.getPermissionList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    closedialog() { // 关闭弹窗
      this.dialogVisible = false
      this.$refs.form.resetFields()
      this.form.name = ''
      this.form.pid = ''
      this.form.enVisible = ''
    },
    adddelPermission(id, type, Type) { // 点击添加
      this.Type = Type
      this.form.type = type
      this.usertitle = '新增权限点'
      this.dialogVisible = true
      this.form.pid = id
    },
    async echoPermission(id, type) { // 点击编辑
      this.Type = type
      this.usertitle = '编辑权限点'
      this.dialogVisible = true
      const data = await echoPermission(id)
      this.form = data
    },
    async Addconfirm() { // 点击确定按钮
      if (this.Type === 'add') {
        await addPermission(this.form)
        this.$message.success('添加成功')
      } else if (this.Type === 'edit') {
        await editPermission(this.form)
        this.$message.success('编辑成功')
      }
      this.getPermissionList()
      this.dialogVisible = false
      this.closedialog()
    }
  }
}
</script>

<style>
.btn-add {
  margin: 10px;

}
</style>
